﻿@model LogisticsRenewModel
@using SpotsHub.Gateway.Models.Customer;
@using Telerik.Web;
@using Telerik.Web.Mvc.UI;

@{
    Layout = "~/Views/Shared/_Layout.cshtml";

    //title
    // +string+
    ViewBag.Title = "Renew Membership";

    // +string+ the entire page
}

    
@using (Html.BeginForm())
{
    @Html.ValidationSummary(false)
    <div class="window">
        <div class="window-title grad-lightgrey grad">
            <div class="window-title-bar grad-titleshine grad">
                <h2>Membership Subscription</h2>
            </div>
        </div>
        <div class="window-content space signup-subscription">
            <div class="window-left">
                <div class="signup-fieldgroup"><strong>Please select from one of the following options:</strong></div>
                @foreach (var o in Model.MembershipOptions)
                {
                    <div class="signup-fieldgroup">
                        @Html.RadioButtonFor(model => model.SelectedProductVariantId, o.ProductVariantId)
                        @o.DisplayText <div class="package-price" style="visibility:hidden">$@Html.DisplayFor(model => o.Price)</div>
                    </div>
                }
                <div class="subtotal-summary"></div>
            </div>
            <div class="window-right">
                @if (Model.MembershipExpireDays.HasValue)
                {
                    if (@Model.MembershipExpireDays > 0)
                    {
                        <div class="hub-expiry">Membership Expires in @Html.DisplayTextFor(model => model.MembershipExpireDays) Days</div>
                    }
                    else
                    {
                        <div class="hub-expiry">Your membership is expired!</div> 
                    }
                }
            </div>
            <div class="content-clear"></div>
        </div>
    </div>

    <div class="window">
        <div class="window-title grad-lightgrey grad">
            <div class="window-title-bar grad-titleshine grad">
                <h2>Membership Purchase History</h2>
            </div>
        </div>
        @if (Model.History.Count > 0)
        {
        <div class="window-content t-grid">
            <table>
                <thead class="t-grid-header">
                    <tr>
                        <th class="purchase-date t-header">Purchase Date</th>
                        <th class="purchase-package t-header">Membership</th>
                        <th class="purchase-days t-header">Length of Membership</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var record in Model.History)
                    { 
                        <tr>
                            <td>@record.Date.ToShortDateString()</td>
                            <td>@record.MemberType</td>
                            <td>@record.Days</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
        }
    </div>

    <div class="window">
        <div class="window-title grad-lightgrey grad">
            <div class="window-title-bar grad-titleshine grad">
                <h2>Account Address</h2>
                @Html.HiddenFor(model => model.Address.AllowEmpty)
            </div>
        </div>
        
        <div class="window-content space signup">
            <div class="signup-left">
                @if (Model.Address.CompanyEnabled)
                {   
                    <div class="signup-company signup-fieldgroup">
                        <div class="form-label">
                            @Html.LabelFor(model => model.Address.Company)
                        </div>
                        <div class="input-display">
                            @Html.DisplayFor(model => model.Address.Company)
                        </div>
                    </div>
                }

                <div class="signup-name signup-fieldgroup">
                    <div class="signup-firstname">
                        <div class="form-label">@Html.LabelFor(model => model.Address.FirstName)</div>
                        <div class="input-display">
                            @Html.DisplayFor(model => model.Address.FirstName)
                        </div>
                    </div>
                    <div class="signup-lastname">
                        <div class="form-label">@Html.LabelFor(model => model.Address.LastName)</div>
                        <div class="input-display">
                            @Html.DisplayFor(model => model.Address.LastName)
                        </div>
                    </div>
                    <div class="content-clear"></div>
                </div>

                @if (Model.Address.StreetAddress2Enabled)
                {
                    <div class="signup-address signup-fieldgroup">
                        <div class="form-label">
                            @Html.LabelFor(model => model.Address.Address2)
                        </div>
                        <div class="input-display">
                            @Html.DisplayFor(model => model.Address.Address2)
                        </div>
                    </div>
                }

                @if (Model.Address.StreetAddressEnabled)
                {
                    <div class="signup-address signup-fieldgroup">
                        <div class="form-label">
                            @Html.LabelFor(model => model.Address.Address1)
                        </div>
                        <div class="input-display">
                            @Html.DisplayFor(model => model.Address.Address1)
                        </div>
                    </div>
                }
            </div>

            <div class="signup-right">
                @if (Model.Address.ZipPostalCodeEnabled || Model.Address.CityEnabled)
                {
                    <div class="signup-zipcity signup-fieldgroup">
                        @if (Model.Address.ZipPostalCodeEnabled)
                        {
                            <div class="signup-zipcode">
                                <div class="form-label">
                                    @Html.LabelFor(model => model.Address.ZipPostalCode)
                                </div>
                                <div class="input-display">
                                    @Html.DisplayFor(model => model.Address.ZipPostalCode)
                                </div>
                            </div>
                        }
                        @if (Model.Address.CityEnabled)
                        {
                            <div class="signup-city">
                                <div class="form-label">
                                    @Html.LabelFor(model => model.Address.City)
                                </div>
                                <div class="input-display">
                                    @Html.DisplayFor(model => model.Address.City)
                                </div>
                            </div>
                        }
                        <div class="content-clear"></div>
                    </div>
                }
                @if (Model.Address.CountryEnabled || Model.Address.StateProvinceEnabled)
                {
                    <div class="signup-countryprovince signup-fieldgroup">
                        @if (Model.Address.CountryEnabled)
                        {
                            <div class="signup-country">
                                <div class="form-label">@Html.LabelFor(model => model.Address.CountryId)</div>
                                <div class="input-display">
                                    @Html.DisplayFor(model => model.Address.CountryName)
                                    @Html.HiddenFor(model => model.Address.CountryId)
                                </div>
                            </div>
                        }
                        @if (Model.Address.CountryEnabled && Model.Address.StateProvinceEnabled)
                        {
                            <div class="signup-stateprovince">
                                <div class="form-label">@Html.LabelFor(model => model.Address.StateProvinceId)</div>
                                <div class="input-display">
                                    @Html.DisplayFor(model => model.Address.StateProvinceName)
                                    @Html.HiddenFor(model => model.Address.StateProvinceId)
                                </div>
                                <span id="states-loading-progress" style="display: none;" class="please-wait">@T("Common.Wait...")</span>
                            </div>
                        }
                        <div class="content-clear"></div>
                    </div>
                }

                @if (Model.Address.CellPhoneEnabled || Model.Address.PhoneEnabled)
                {
                    <div class="signup-phonegroup signup-fieldgroup">
                        @if (Model.Address.CellPhoneEnabled)
                        {
                            <div class="signup-cellphone">
                                <div class="form-label">
                                    @Html.LabelFor(model => model.Address.CellPhoneNumber)
                                </div>
                                <div class="input-display">
                                    @Html.DisplayFor(model => model.Address.CellPhoneNumber)
                                </div>
                            </div>
                        }
                        @if (Model.Address.PhoneEnabled)
                        {
                            <div class="signup-phone">
                                <div class="form-label">
                                    @Html.LabelFor(model => model.Address.PhoneNumber)
                                </div>
                                <div class="input-display">
                                    @Html.DisplayFor(model => model.Address.PhoneNumber)
                                </div>
                            </div>
                        }
                        <div class="content-clear"></div>
                    </div>
                }

            </div>
            <div class="content-clear"></div>
            <div class="signup-notes">
                <ul>
                    <li>We currently do not allow editing of the permanent account address.</li>
                </ul>
            </div>
        </div>
    </div>

    @Html.AntiForgeryToken()

    <div class="window">
        <div class="window-title grad-lightgrey grad">
            <div class="window-title-bar grad-titleshine grad">
                <h2>Billing Address</h2>
            </div>
        </div>
        <div class="window-content signup-billingwrapper">
            <div class="window-content space signup-billingcheck">
                @Html.CheckBoxFor(model => model.BillingAddress.AllowEmpty)
                @T("Logistics.Common.IsBillingAddressSame")
            </div>
            <div class="window-content space signup-billingaddress">
                <div class="signup-mandatory">
                    @Html.RequiredHint()<span>=Mandatory Fields</span>
                </div>
                <div class="signup-left">
                    @if (Model.Address.CompanyEnabled)
                    {   
                        <div class="signup-company signup-fieldgroup">
                            <div class="form-label">
                                @if (Model.Address.CompanyRequired)
                                {
                                    @Html.RequiredHint()
                                }
                                @Html.LabelFor(model => model.BillingAddress.Company)
                            </div>
                            @Html.EditorFor(model => model.BillingAddress.Company)
                            @Html.ValidationMessageFor(model => model.BillingAddress.Company)
                        </div>
                    }

                    <div class="signup-name signup-fieldgroup">
                        <div class="signup-firstname">
                            <div class="form-label">@Html.RequiredHint() @Html.LabelFor(model => model.BillingAddress.FirstName)</div>
                            @Html.EditorFor(model => model.BillingAddress.FirstName)
                            @Html.ValidationMessageFor(model => model.BillingAddress.FirstName)
                        </div>
                        <div class="signup-lastname">
                            <div class="form-label">@Html.RequiredHint() @Html.LabelFor(model => model.BillingAddress.LastName)</div>
                            @Html.EditorFor(model => model.BillingAddress.LastName)
                            @Html.ValidationMessageFor(model => model.BillingAddress.LastName)
                        </div>
                        <div class="content-clear"></div>
                    </div>

                    @if (Model.Address.StreetAddress2Enabled)
                    {
                        <div class="signup-address signup-fieldgroup">
                            <div class="form-label">
                                @if (Model.Address.StreetAddress2Required)
                                {
                                    @Html.RequiredHint()
                                }
                                @Html.LabelFor(model => model.BillingAddress.Address2)
                            </div>
                            @Html.EditorFor(model => model.BillingAddress.Address2)
                            @Html.ValidationMessageFor(model => model.BillingAddress.Address2)
                        </div>
                    }

                    @if (Model.Address.StreetAddressEnabled)
                    {
                        <div class="signup-address signup-fieldgroup">
                            <div class="form-label">
                                @if (Model.Address.StreetAddressRequired)
                                {
                                    @Html.RequiredHint()
                                }
                                @Html.LabelFor(model => model.BillingAddress.Address1)
                            </div>
                            @Html.EditorFor(model => model.BillingAddress.Address1)

                            @Html.ValidationMessageFor(model => model.BillingAddress.Address1)
                        </div>
                    }


                </div>

                <div class="signup-right">
                    @if (Model.Address.ZipPostalCodeEnabled || Model.Address.CityEnabled)
                    {
                        <div class="signup-zipcity signup-fieldgroup">
                            @if (Model.Address.ZipPostalCodeEnabled)
                            {
                                <div class="signup-zipcode">
                                    <div class="form-label">
                                        @Html.RequiredHint()
                                        @Html.LabelFor(model => model.BillingAddress.ZipPostalCode)
                                    </div>
                                    @Html.EditorFor(model => model.BillingAddress.ZipPostalCode)
                                    @Html.ValidationMessageFor(model => model.BillingAddress.ZipPostalCode)
                                </div>
                            }
                            @if (Model.Address.CityEnabled)
                            {
                                <div class="signup-city">
                                    <div class="form-label">
                                        @Html.RequiredHint()
                                        @Html.LabelFor(model => model.BillingAddress.City)
                                    </div>
                                    @Html.EditorFor(model => model.BillingAddress.City)
                                    @Html.ValidationMessageFor(model => model.BillingAddress.City)
                                </div>
                            }
                            <div class="content-clear"></div>
                        </div>
                    }
                    @if (Model.Address.CountryEnabled || Model.Address.StateProvinceEnabled)
                    {
                        <div class="signup-countryprovince signup-fieldgroup">
                            @if (Model.Address.CountryEnabled)
                            {
                                <div class="signup-country">
                                    <div class="form-label">@Html.LabelFor(model => model.BillingAddress.CountryId)</div>
                                    <div class="input-display">@Html.DisplayFor(model => model.BillingAddress.CountryName)</div>
                                    @Html.HiddenFor(model => model.BillingAddress.CountryId)
                                </div>
                            }
                            @if (Model.Address.CountryEnabled && Model.Address.StateProvinceEnabled)
                            {
                                <div class="signup-stateprovince">
                                    <div class="form-label">@Html.LabelFor(model => model.BillingAddress.StateProvinceId)</div>
                                    <div class="input-display">@Html.DisplayFor(model => model.BillingAddress.StateProvinceName)</div>
                                    @Html.HiddenFor(model => model.BillingAddress.StateProvinceId)
                                    <span id="states-loading-progress-billing" style="display: none;" class="please-wait">@T("Common.Wait...")</span>
                                </div>
                            }
                            <div class="content-clear"></div>
                        </div>
                    }

                    @if (Model.Address.CellPhoneEnabled || Model.Address.PhoneEnabled)
                    {
                        <div class="signup-phonegroup signup-fieldgroup">
                            @if (Model.Address.CellPhoneEnabled)
                            {
                                <div class="signup-cellphone">
                                    <div class="form-label">
                                        @Html.RequiredHint()
                                        @Html.LabelFor(model => model.BillingAddress.CellPhoneNumber)
                                    </div>
                                    @Html.EditorFor(model => model.BillingAddress.CellPhoneNumber)
                                    @Html.ValidationMessageFor(model => model.BillingAddress.CellPhoneNumber)
                                </div>
                            }
                            @if (Model.Address.PhoneEnabled)
                            {
                                <div class="signup-phone">
                                    <div class="form-label">
                                        @if (Model.BillingAddress.PhoneRequired)
                                        {
                                            @Html.RequiredHint()
                                        }
                                        @Html.LabelFor(model => model.BillingAddress.PhoneNumber)
                                    </div>
                                    @Html.EditorFor(model => model.BillingAddress.PhoneNumber)
                                    @Html.ValidationMessageFor(model => model.BillingAddress.PhoneNumber)
                                </div>
                            }
                            <div class="content-clear"></div>
                        </div>
                    }

                    <div class="signup-email signup-fieldgroup">
                        <div class="form-label">
                            @Html.RequiredHint()
                            @Html.LabelFor(model => model.BillingAddress.Email)
                        </div>
                        @Html.EditorFor(model => model.BillingAddress.Email)
                        @Html.ValidationMessageFor(model => model.BillingAddress.Email)
                    </div>

                </div>
                <div class="content-clear"></div>
            </div>
        </div>

    </div>
    
    <div class="register-terms">
        <div class="window clear-block">
            <div class="window-title grad-lightgrey grad">
                <div class="window-title-bar grad-titleshine grad">
                    <h2>Terms & Conditions</h2>
                </div>
            </div>
            <div class="window-content space signup-terms">
                <strong>Please review the Terms & Conditions before continuing.</strong>
                @Html.Action("_TermsAndConditions", "Home")
                @Html.CheckBoxFor(model => model.Accepted)
                <strong>I accept Terms and Conditions.</strong>
                <div class="signup-register">
                    <input type="submit" class="button-red register-next-step-button" value="Continue" name="register-button" />
                    @Html.ActionLink("Back to My HUB", "Info", "Customer", new { area = "" }, new { @class = "button-grey" })
                    
                    <div class="content-clear"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            checkBillingCheckbox("start");
            checkTermsAndConditions("start");
            checkSubscriptionPackage("start");
            validationInputStyling();
        });
        $('.signup-billingcheck #@Html.FieldIdFor(model => model.BillingAddress.AllowEmpty)').change(function () {
            checkBillingCheckbox();
        });
        $('.signup-subscription input[name="SelectedProductVariantId"]').change(function () {
            checkSubscriptionPackage();
        });
        $('#Accepted').change(function () {
            checkTermsAndConditions();
        });

        $('.register-next-step-button').live("click", function () {
            $('.clicked').removeClass(".clicked").show();
            $('#ajax-loading-bar').hide();
            $(this).addClass("clicked");
            $('#ajax-loading-bar').show().css({
                "display": $(this).css("display"),
                "width": $(this).outerWidth(),
                "height": $(this).outerHeight(),
                "margin-top": $(this).css("margin-top"),
                "margin-bottom": $(this).css("margin-bottom"),
                "margin-left": $(this).css("margin-left"),
                "margin-right": $(this).css("margin-right"),
                "float": $(this).css("float")
            }).insertAfter($(this));
            $(this).hide();
        });

        function checkBillingCheckbox(start) {
            var billingHeight;
            if ($('.signup-billingcheck #@Html.FieldIdFor(model => model.BillingAddress.AllowEmpty)').attr("checked")) {
                billingHeight = $('.signup-billingcheck').outerHeight();
                $('.signup-billingaddress input, .signup-billingaddress select, .signup-billingaddress a').each(function () {
                    $(this).attr("tabindex", -1);
                });
            } else {
                billingHeight = $('.signup-billingcheck').outerHeight() + $('.signup-billingaddress').outerHeight();
                $('.signup-billingaddress input, .signup-billingaddress select, .signup-billingaddress a').each(function () {
                    $(this).attr("tabindex", 0);
                });
            }
            if (start) {
                $('.signup-billingwrapper').css({ "height": billingHeight });
            } else {
                $('.signup-billingwrapper').stop().animate({ "height": billingHeight });
            }

        }
        function checkTermsAndConditions(start) {
            if ($('#Accepted').attr("checked")) {
                if (start) {
                    $('.signup-register .button-grey').css({ "right": "155px" });
                    $('.signup-register .button-red').show();
                } else {
                    $('.signup-register .button-grey').animate({ "right": "155px" }, function () {
                        $('.signup-register .button-red').stop().fadeIn();
                    });
                }
            } else {
                if (start) {
                    $('.signup-register .button-red').hide();
                } else {
                    $('.signup-register .button-red').stop().fadeOut(function () {
                        $('.signup-register .button-grey').animate({ "right": "0" });
                    });
                }
            }
        }
        function checkSubscriptionPackage(start) {
            $('.subtotal-summary').empty();
            var checkedSub = $('.signup-subscription input[name="SelectedProductVariantId"]:checked');
            $('.subtotal-summary').html("Subtotal: " + checkedSub.parent().find('.package-price').text());
        }
        function validationInputStyling() {
            $('.field-validation-error').each(function () {
                $(this).prev('input').css({ "border": "1px solid #fc566a" });
            });
        }
    </script>

}